// menu that fills its parent control and becomes visible on hover
.hover-menu {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .hover-content {
    opacity: 0;
    transform: scale(0);
    transition: opacity ease $transition-time-half;
    background-color: rgba(0, 0, 0, 0.4);
    .buttons .btn {
      border: 0px;
      display: flex;
      width: 100%;
      margin: 4px;
      &:hover {
        background-color: $brand-clickable;
        color: $text-color;
        transition-property: background-color;
        transition: ease-in-out 2ms;
      }
      svg {
        margin: auto 4px;
      }
    }
  }

  &:hover {
    .hover-content {
      opacity: 1;
      transform: scale(1);
      width: 100%;
      height: 100%;

      &.hover-launcher {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        .icon {
          width: 3em;
          height: 3em;
        }
      }

      .buttons {
        .btn {
          transition: background-color 100ms;
          &:hover {
            background-color: darken($brand-primary, 20%);
            color: $gray-darker;
          }
        }
      }
    }
  }
}
